import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import styles from './index.module.less';

const Detail = ({ userDetail }) => {
  const { data } = userDetail;
  const content = [];
  for (const key in data) {
    if ({}.hasOwnProperty.call(data, key)) {
      content.push(
        <div key={key} className={styles.item}>
          <div>{key}</div>
          <div>{String(data[key])}</div>
        </div>
      );
    }
  }
  return (
    <div className="content-inner">
      <div className={styles.content}>{content}</div>
    </div>
  );
};

Detail.propTypes = {
  userDetail: PropTypes.object,
};

export default connect(({ userDetail, loading }) => ({
  userDetail,
  loading: loading.models.userDetail,
}))(Detail);
